<template>
  <div id="advert" class="container">
    <h3 class="title">
      <span />
      账号管理
    </h3>
    <el-button type="primary" class="add" size="small" icon="el-icon-plus" style="margin-bottom: 15px" @click="goAdd">
      添加
    </el-button>
    <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete"> {{ $t('批量删除') }}</el-button> -->
    <BaseDialog :title="addForm.id ? '编辑' : '添加'" :dialog-show.sync="dialogShow" width="50%" class="advert">
      <el-form ref="addForm" :model="addForm" :rules="rules" inline class="addForm" label-width="100px">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="addForm.type" @change="chooseType">
            <el-radio :label="1">百度</el-radio>
            <el-radio :label="2">谷歌</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账号名" prop="account">
          <el-input v-model="addForm.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" />
        </el-form-item>
        <el-form-item label="token" prop="token">
          <el-input v-model="addForm.token" />
        </el-form-item>
        <el-form-item :label="$t('状态')" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="btn">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-form>
    </BaseDialog>
    <el-table :data="orderData" border stripe :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column label="ID" prop="id" width="80" />
      <el-table-column label="类型" prop="type" width="120px">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">百度</span>
          <span v-if="scope.row.type == 2">谷歌</span>
        </template>
      </el-table-column>
      <el-table-column label="账号名" prop="account" />
      <el-table-column label="类型" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">正常</span>
          <span v-if="scope.row.status == 2">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="create_time" />
      <el-table-column :label="$t('操作')" width="150px" fixed="right">
        <template slot-scope="scope">
          <el-button class="edit" size="mini" @click="editor(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" class="dele" @click="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      :hide-on-single-page="page.total < page.size ? true : false" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import accountApi from '@/api/market/seoAccount.js'
import websiteApi from '@/api/website.js'
import attachmentApi from '@/api/system/attachment'
import { getHuocmsToken } from '@/utils/auth'
import log from '@/api/log'
var token = 'Bearer ' + getHuocmsToken()
export default {
  data() {
    return {
      dialogShow2: false,
      imageUrl: '',
      videoUrl: '',
      videoName: '',
      orderData: [], //
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {
        type: 1,
        status: 1
      },
      rules: {
        // website_id: [
        //   { required: 'true', message: this.$t('请选择站点'), trigger: 'change' }
        // ],
        account: [
          { required: 'true', message: '请输入账号名', trigger: 'blur' }
        ],
        password: [
          { required: 'true', message: '请输入密码', trigger: 'blur' }
        ],
        token: [{ required: 'true', message: '请输入token', trigger: 'blur' }]
      },
      searchForm: {
        title: ''
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {},
      id: '',
      loading: true,
      attachmentType: '', // 附件分类
      uploadType: '' // 上传类型
    }
  },
  created() {
    this.getList()
    this.getWebsiteList()
  },
  mounted() {
    // this.getTikets()
  },
  updated() { },
  methods: {
    getData(data) {
      if (data.length > 1) {
        this.$message.error(this.$t('最多只能选择一张图片'))
      } else {
        if (this.uploadType == 'image') {
          this.addForm.attachment_id = data[0].id
          this.imageUrl = data[0].url
        } else if (this.uploadType == 'video') {
          this.addForm.attachment_id = data[0].id
          this.videoUrl = data[0].url
          this.videoName = data[0].name
        }
        this.dialogShow2 = false
      }
    },

    // 打开附件弹窗
    openList(val) {
      this.attachmentType = this.addForm.type
      this.dialogShow2 = true
      // console.log(this.addForm.type, this.dialogShow2)
      // return
      this.$nextTick(() => {
        this.$refs.attachment.getAttachmentList()
        // this.$refs.attachment.$refs.AttachmentCate.getCateList(0)
        console.log(this.$refs.attachment)
      })

      this.uploadType = val
    },

    // 全选
    handleSelectionChange(val) { },
    // 批量删除
    Batchdelete() { },
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
      })
    },
    // 选择站点
    chooseWedsite(val) {
      this.$forceUpdate()
    },
    chooseType(val) {
      if (!this.addForm.id) {
        if (this.addForm.type == 1) {
          this.addForm = {
            type: val,
            account: '',
            password: '',
            token: ''
          }
        } else if (this.addForm.type == 2) {
          this.addForm = {
            type: val,
            account: '',
            password: '',
            token: ''
          }
        }
      }
    },
    // 新增
    goAdd() {
      this.addForm = {
        id: '',
        type: 1,
        account: '',
        password: '',
        token: '',
        status: 1
      }
      this.dialogShow = true
    },
    // 编辑 获取详情
    editor(val) {
      accountApi.seoAccountInfo({ id: val.id }).then(res => {
        if (res.code == 0) {
          this.addForm = {
            id: res.data.id,
            type: res.data.type,
            account: res.data.account,
            password: res.data.password,
            token: res.data.token,
            status: res.data.status
          }
        }

        this.dialogShow = true
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            accountApi.seoAccountAdd({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          } else {
            accountApi.seoAccountEdit({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },

    // 删除
    del(row) {
      this.$confirm('此操作将永久删除此账号, 是否继续?', this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          accountApi.seoAccountDel({ id: row.id }).then(res => {
            if (res.code == 0) {
              this.$message.success('已删除')
              this.getList()
            } else {
              this.$message.error('删除失败')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    search(val) {
      this.getList()
    },
    reset() {
      this.searchForm.title = ''
    },
    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.title = this.searchForm.title
      accountApi.seoAccountList(this.val).then(res => {
        this.orderData = res.data
        this.page.total = res.count
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.attachment .el-dialog {
  .el-dialog__body {
    height: 600px;
  }

  .el-table {
    .attachmentImg {
      width: 60px;
      height: 60px;
    }
  }

  .el-button--primary {
    background-color: var(--huocms-com-color-primary);
    border-color: var(--huocms-com-color-primary);
    border-radius: 20px;
  }
}

#advert {

  // .advert{
  //   .el-select{
  //       width: calc(100% - 100px);
  //   }
  //   .el-date-editor.el-input{
  //     width: calc(100% - 100px);
  //   }
  // }
  .addForm .el-form-item {
    width: 100%;
  }

  .addForm .el-form-item__content {
    width: calc(100% - 100px);
  }

  .el-date-editor.el-input {
    width: 100%;
  }
}
</style>
<style scoped lang="scss">
.el-table {
  margin-bottom: 20px;
}

.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.avatar {
  max-width: 200px;
}

.attachment_imgBox {
  .videoName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
}
</style>
